<!DOCTYPE html>
<html>
<head>
    <title>Fig. 6.15 Redrawing</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style & Font Settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        // A font that mimics a hand-drawn style
        const handwrittenFont = '28px "Comic Sans MS", cursive, sans-serif';
        const handwrittenFontSmall = '18px "Comic Sans MS", cursive, sans-serif';
        // A standard font for the figure caption
        const captionFont = 'bold 24px "Times New Roman", serif';

        // --- Coordinate Definitions ---
        const originX = 80;
        const originY = 300;
        const axisXEnd = originX + 320;
        const axisYEnd = originY - 250;
        const tauX = originX + 200;
        const eps0Y = originY - 150;
        const headlen = 15; // Arrow head length

        // --- Draw Axes ---
        ctx.beginPath();
        // Horizontal axis (t-axis)
        ctx.moveTo(originX - 20, originY);
        ctx.lineTo(axisXEnd, originY);
        // Arrow head for t-axis
        ctx.moveTo(axisXEnd, originY);
        ctx.lineTo(axisXEnd - headlen, originY - headlen / 2.5);
        ctx.moveTo(axisXEnd, originY);
        ctx.lineTo(axisXEnd - headlen, originY + headlen / 2.5);

        // Vertical axis (ε_x(t)-axis)
        ctx.moveTo(originX, originY + 20);
        ctx.lineTo(originX, axisYEnd);
        // Arrow head for vertical axis
        ctx.moveTo(originX, axisYEnd);
        ctx.lineTo(originX - headlen / 2.5, axisYEnd + headlen);
        ctx.moveTo(originX, axisYEnd);
        ctx.lineTo(originX + headlen / 2.5, axisYEnd + headlen);
        ctx.stroke();

        // --- Draw the Rectangular Pulse ---
        ctx.beginPath();
        // This path draws the three sides of the pulse that are not on the axis.
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, eps0Y);
        ctx.lineTo(tauX, eps0Y);
        ctx.lineTo(tauX, originY);
        ctx.stroke();

        // --- Draw Labels ---
        ctx.font = handwrittenFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Label '0' at the origin
        ctx.fillText('0', originX - 20, originY + 15);

        // Label 't' for the horizontal axis
        ctx.fillText('t', axisXEnd + 20, originY);

        // Label 'τ' on the horizontal axis
        ctx.fillText('\u03C4', tauX, originY + 25); // Greek letter tau

        // Label 'ε₀' on the vertical axis
        ctx.textAlign = 'right';
        ctx.fillText('\u03B5', originX - 20, eps0Y); // Greek letter epsilon
        ctx.font = handwrittenFontSmall;
        ctx.fillText('0', originX - 12, eps0Y + 8);

        // Label 'εₓ(t)' for the vertical axis
        ctx.textAlign = 'left';
        ctx.font = handwrittenFont;
        ctx.fillText('\u03B5', originX + 5, axisYEnd - 15);
        ctx.font = handwrittenFontSmall;
        ctx.fillText('x', originX + 20, axisYEnd - 7);
        ctx.font = handwrittenFont;
        ctx.fillText('(t)', originX + 30, axisYEnd - 15);

        // --- Draw Figure Caption ---
        ctx.font = captionFont;
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 6.15', canvas.width / 2, originY + 70);

    </script>
</body>
</html>